﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>监听变化</title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var vm=new Vue({
				el:"#box",
				data:{
					a:"这是一个段落啊",
					b:2,
					c:{a:1,b:2}
				}
			});
			vm.$watch("a",function(){ //监听像a这样的数据是这样写，当监听json这样的时需加一个参数
				this.b=100+this.b;
			},{deep:true});
			document.onclick=function(){
				//vm.a="aa";
				vm.c.a="aaaaaa";
			}
		}
		
	</script>
</head>
<body>
	<div id="box">
		{{a}}
		<br />
		{{b}}
		<br />
		<!-- 此时的json就像stringify 是一个过滤器 -->
		{{c | json}} 
	</div>

</body>
</html>